import React from 'react'
import { Card, Row, Col, Statistic, Progress, Table } from 'antd'
import { AreaChartOutlined, TableOutlined, AppstoreOutlined, AuditOutlined } from '@ant-design/icons'
import { EChartsOption } from 'echarts'
import ReactECharts from 'echarts-for-react'

const Dashboard: React.FC = () => {
  // 统计数据
  const statisticsData = [
    {
      title: '数据宽表总数',
      value: 128,
      icon: <TableOutlined style={{ color: '#1890ff' }} />,
      color: '#1890ff',
    },
    {
      title: '组件总数',
      value: 256,
      icon: <AppstoreOutlined style={{ color: '#52c41a' }} />,
      color: '#52c41a',
    },
    {
      title: '主题场景数',
      value: 64,
      icon: <AreaChartOutlined style={{ color: '#fa8c16' }} />,
      color: '#fa8c16',
    },
    {
      title: '待审批数',
      value: 12,
      icon: <AuditOutlined style={{ color: '#f5222d' }} />,
      color: '#f5222d',
    },
  ]

  // 使用趋势图表配置
  const usageTrendOptions: EChartsOption = {
    title: {
      text: '平台使用趋势',
      left: 'left',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['组件使用量', '主题访问量', '数据查询量'],
      top: 30,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '组件使用量',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210],
        smooth: true,
        areaStyle: {},
      },
      {
        name: '主题访问量',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310],
        smooth: true,
        areaStyle: {},
      },
      {
        name: '数据查询量',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410],
        smooth: true,
        areaStyle: {},
      },
    ],
  }

  // 组件分布图表配置
  const componentDistributionOptions: EChartsOption = {
    title: {
      text: '组件类型分布',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 50,
    },
    series: [
      {
        name: '组件数量',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 120, name: '数据组件' },
          { value: 80, name: '图表组件' },
          { value: 36, name: '表格组件' },
          { value: 20, name: '其他组件' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }

  // 最近活动列表
  const recentActivities = [
    {
      key: '1',
      activity: '创建数据组件',
      component: '销售数据分析表',
      operator: '张三',
      time: '2024-08-25 14:30',
      status: '已完成',
    },
    {
      key: '2',
      activity: '提交审批',
      component: '库存监控图表',
      operator: '李四',
      time: '2024-08-25 13:45',
      status: '审批中',
    },
    {
      key: '3',
      activity: '发布主题场景',
      component: '运营管理大屏',
      operator: '王五',
      time: '2024-08-25 12:20',
      status: '已发布',
    },
    {
      key: '4',
      activity: '更新数据宽表',
      component: '供应链数据表',
      operator: '赵六',
      time: '2024-08-25 11:15',
      status: '已完成',
    },
  ]

  const activityColumns = [
    {
      title: '活动类型',
      dataIndex: 'activity',
      key: 'activity',
    },
    {
      title: '组件/主题',
      dataIndex: 'component',
      key: 'component',
    },
    {
      title: '操作人',
      dataIndex: 'operator',
      key: 'operator',
    },
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap: Record<string, { color: string; text: string }> = {
          '已完成': { color: '#52c41a', text: '已完成' },
          '审批中': { color: '#fa8c16', text: '审批中' },
          '已发布': { color: '#1890ff', text: '已发布' },
        }
        return (
          <span style={{ color: statusMap[status]?.color }}>
            {statusMap[status]?.text || status}
          </span>
        )
      },
    },
  ]

  return (
    <div>
      <h1 style={{ marginBottom: 24 }}>数据看板</h1>
      
      {/* 统计卡片 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        {statisticsData.map((item, index) => (
          <Col span={6} key={index}>
            <Card>
              <Statistic
                title={item.title}
                value={item.value}
                prefix={item.icon}
                valueStyle={{ color: item.color }}
              />
            </Card>
          </Col>
        ))}
      </Row>

      {/* 图表区域 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={16}>
          <Card title="平台使用趋势" style={{ height: 400 }}>
            <ReactECharts option={usageTrendOptions} style={{ height: 320 }} />
          </Card>
        </Col>
        <Col span={8}>
          <Card title="组件类型分布" style={{ height: 400 }}>
            <ReactECharts option={componentDistributionOptions} style={{ height: 320 }} />
          </Card>
        </Col>
      </Row>

      {/* 系统状态 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={8}>
          <Card title="系统状态">
            <div style={{ marginBottom: 16 }}>
              <div style={{ marginBottom: 8 }}>CPU使用率</div>
              <Progress percent={65} strokeColor="#52c41a" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ marginBottom: 8 }}>内存使用率</div>
              <Progress percent={78} strokeColor="#fa8c16" />
            </div>
            <div>
              <div style={{ marginBottom: 8 }}>磁盘使用率</div>
              <Progress percent={45} strokeColor="#1890ff" />
            </div>
          </Card>
        </Col>
        <Col span={16}>
          <Card title="最近活动">
            <Table
              columns={activityColumns}
              dataSource={recentActivities}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default Dashboard